<template>

    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
    >


        <!-- 弹窗表单 -->
        <el-form
            :inline="false"
            :model="addForm"
            size="mini"
            class="demo-form-inline"
            label-width="120px"
            :rules="dataRule"
            ref="ruleForm"
        >

        
            <!-- #.流程填写内容 -->
              <el-form-item label="流程id" prop="flowId">
                <el-input
                    v-model="addForm.flowId"
                    :disabled="dialogType == 2"
                    placeholder="请输入流程id"
                    @blur="validateFlowId(addForm.flowId)"
                ></el-input>
            </el-form-item>
           

            <el-form-item label="标题" prop="flowName">
                <el-input v-model="addForm.flowName" placeholder="请输入流程名称"  clearable></el-input>
            </el-form-item>
 

            <el-form-item label="描述" prop="remark">
                <el-input
                    type="textarea"
                    :rows="3"
                    v-model="addForm['remark']"
                    placeholder="请输入详细描述"
                    clearable
                />
            </el-form-item>


          
            <!-- #.保存和提交按钮 -->
            <el-form-item>
                <el-button @click="dialogVisible = false" style="padding:10px 40px">取 消</el-button>
                <el-button
                    type="primary"
                    style="padding:10px 40px"
                    @click="addAndEditSubmit('ruleForm')"
                >保存</el-button>
            </el-form-item>


        </el-form>

           

    </el-dialog>
  
</template>

<script>

import API from '@/api';
import upload from '../../components/upLoad';
import cloneDeep from 'lodash/cloneDeep';

export default {

    components: {
        upload,
    },

    data() {
       
        return {

            //el-dialog 弹窗 
            dialogTitle: '新增',
            dialogVisible: false,
            type: 1,

            //表单
            addForm: {
                flowId:'',
                flowName:'',
                remark:''
            },

        };
    },

    methods: {

        //- 弹窗关闭
        handleClose() {
            this.clearForm();
            this.dialogVisible = false;
        },

        //- 清空新增中的数据
        clearForm() {
            this.addForm = {

                flowId:'',
                flowName:'',
                remark:''

            };
        },

        //- 初始化 
        init(item, appId, pageId,appType) {
            this.dialogVisible = true;
            if (item) {
                this.type = 2; //编辑
                this.dialogTitle = '编辑';
                this.addForm=item;
            } else {
                this.type = 1; // 新增
                this.dialogTitle = '新增';
            }
        },

        validateFlowId(id) {
            API.approvalProcessManage.validateFlowId({ flowId: id }).then((res) => {
                console.log(res);
                if (res.code == '0000') {
                    this.isUser = res.result;
                    if (res.result) {
                        this.$message.error('该流程id已使用，请重新输入');
                    }
                }
            });
        },
        //- 新增或编辑
        addAndEditSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {

                     let params = cloneDeep(this.addForm);

                         // 1. 新增    ,   2.编辑
                     var tick = this.type == 1 ? API.approvalProcessManage.Add(params) : API.approvalProcessManage.Update(params);

                      tick.then((data) => {
                            if (data.code == '0000') {
                                this.$message({
                                    message: `${this.type == 2 ? '修改成功' : '新增成功'}`,
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {

                                        if(this.type==2){
                                             this.clearForm();
                                        }

                                        this.dialogVisible = false;
                                        this.$emit('refreshDataList');
                                    }
                                });
                            }else{
                                this.$message.error(res.message);  
                            }
                        });

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }

    },

}
</script>

<style>

</style>